<template>
<div class="List-wrap">
    <van-nav-bar title="分类" left-text="返回" left-arrow fixed @click-left="onClickLeft" />
    <!-- start topbar -->
    <div class="wrap">
        <div class="left">
            <van-sidebar v-model="activeKey" >
                <van-sidebar-item v-for="item in IndexTopMenu" :key="item.id" @click="getDataItem(item.id)" :title="item.title" />
            </van-sidebar>
        </div>
        <div class="right">
            <van-list v-model="IndexTopNavloading" :finished="IndexTopNavfinished" finished-text="没有更多了" @load="onIndexTopNavLoad">
                <Goods v-if="goodsDataShow" :data="goodsData" :load="false" :type="goodsType" @getDetails="getDetail" @getDetail="getDetail" :size="classify" />
            </van-list>
        </div>
    </div>
    <!-- end topbar -->
</div>
</template>

<script>
import copyright from "@/components/copyright";
import storeHeader from '@/components/storeHeader.vue'
import storeSortGoods from '@/components/storeSortGoods.vue'
import Goods from '@/common/goods/index.vue';
import { ftruncate } from 'fs';
export default {
    name: "List",
    data(){
        return {
            activeKey: 0,
            category: [],
            goods: [],
            IndexTopMenu: null,
            IndexTopMenuPage: 1,
            IndexTopNavloading: false,  
            IndexTopNavfinished: false,
            IndexTopMenuData: {
                data: []
            },
            topNavLastPage: null,
            classify: 'classify',
            type:null,
            goodsData:null,
            category_id: null,
            goodsDataShow: false,
            goodsType: null
        }
    },
    components: {
        copyright,
        storeHeader,
        storeSortGoods,
        Goods
    },
    created() {
        this.type = this.$route.params.type;
        if(this.type == 'official'){
            this.goodsType = 0;
        }else if(this.type == 'integral'){
            this.goodsType = 2;
        }else {
            this.goodsType = 0;
        }
        this.IndexTopMenu = this.$store.state.categoryListData
        this.category_id = this.IndexTopMenu[0].id;
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        getDataItem(e) {
            if(this.category_id == e)return;
            this.goodsDataShow = false;
            this.category_id = e;
            this.topNavLastPage = null;
            this.IndexTopMenuPage = 1;
            this.IndexTopNavfinished = false;
            this.IndexTopMenuData = [];
            this.getTopNavMenuData();
        },
        onIndexTopNavLoad(){
            this.getTopNavMenuData()
        },
        getTopNavMenuData() {
            let params = {};
            params.token = sessionStorage.getItem("token");
            params.page = this.IndexTopMenuPage;
            let URL = '/api/store/index/data/' + this.category_id;
            this.axios.get(URL,{params}).then(r=>{
                if(r.data.data.current_page <= r.data.data.last_page){
                    this.IndexTopMenuPage = r.data.data.current_page +1;
                    if(r.data.data.current_page == 1){
                        this.goodsData = r.data.data.data
                    }else {
                        this.goodsData = [...this.goodsData,...r.data.data.data]
                    }
                    this.IndexTopNavloading = false;
                }else {
                    this.IndexTopNavfinished = true;
                    this.IndexTopNavloading = false;
                }
                
            }).catch(err=>{
                console.log(err);
            })
            this.goodsDataShow = true
        },
        getDetail(e, type) {
            console.log(e);
            
            if (type == 1) {
                this.global.state.productStore_goods = e;
                this.$router.push({
                    name: 'productStore',
                    path: '/product/store'
                })
            } else if (type == 2) {
                this.global.state.productStore_goods = e;
                this.$router.push({
                    name: 'productIntegral',
                    path: '/product/integral'
                })
            } else {
                this.global.state.productMerchant_store_id = e.store_id;
                this.global.state.productMerchant_goods = e;
                this.$router.push({
                    path: '/product/merchant'
                });
            }
        },
    },

};
</script>

<style scoped>
.List-wrap .wrap {
    position: relative;
}

.List-wrap .wrap .left {
    position: fixed;
    left: 0;
    top: 50px;
    bottom: 0;
    width: 80px;
    overflow-y: auto;
    overflow-x: hidden;
}

.List-wrap .wrap .right {
    position: absolute;
    right: 0;
    top: 50px;
    bottom: 0;
    width: calc(100% - 90px);
}

.header-wraper {
    background-color: rgba(0, 0, 0, 0) !important;
}

.topbar {
    position: relative;
    width: 100%;
}

.topbar a {
    display: block;
    height: 100%;
    width: 100%;
}

.topbar .img {
    height: 100%;
    width: 100%;
    background-size: cover;
}

.topbar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    padding: 2px 12px;
}

.topbar-container-title p {
    padding-left: 5px;
    margin: 0;
    line-height: 25px;
}

.topbar-container-title p:nth-child(1) {
    font-size: 20px;
    font-weight: 700;
}

.store-wrap {
    padding-bottom: 50px;
}

.data {
    width: calc(100% - 85px);
    min-height: 470px;
    background: white;
    box-sizing: border-box;
    padding: 5px 0;
}
</style>
